<template>
  <div id="account">
    <!-- pc center wrapper -->
    <div class="center_wrapper">
      <!-- back part -->
      <div class="back_part">
        <div class="back_btn" @click="goBack">
          <img src="@/assets/images/pc_black/auth/back.png" />
          <span>返回</span>
        </div>
      </div>

      <!-- account part -->
      <div class="account_part">
        <div class="account_left">
          <p>账户余额</p>
          <p>
            <span>¥</span>
            <span>92,000.00</span>
          </p>
        </div>

        <div class="account_center"></div>

        <div class="account_right">
          <el-button @click="openWithdrawalDialog">提现</el-button>
          <el-button @click="openBundleDialog">绑定</el-button>
        </div>
      </div>

      <!-- table part -->
      <div class="table_part">
        <div class="table_head">
          <ul>
            <li>时间</li>
            <li>类型</li>
            <li>金额</li>
            <li>状态</li>
          </ul>
        </div>

        <div class="table_body">
          <ul v-for="item in tabelData" :key="item.id">
            <li>{{ item.time }}</li>
            <li>{{ item.type }}</li>
            <li>￥{{ item.amount }}</li>
            <li :class="{ cGreen: item.state === '已提现' }">
              {{ item.state }}
            </li>
          </ul>
        </div>

        <div class="table_pag">
          <ElPage
            @handleCurrentChange="changePage"
            :total="total"
            :pageSizes="[4]"
          />
        </div>
      </div>

      <!-- bundle dialog -->
      <el-dialog
        class="bundle_dialog"
        :visible="isShowBundleDialog"
        :show-close="false"
        :close-on-click-modal="false"
        center
      >
        <div class="dialog_title">
          <div class="left_box">
            <span>绑定</span>
          </div>

          <img
            class="right_icon"
            @click="closeBundleDialog"
            src="@/assets/images/pc_black/auth/close.png"
          />
        </div>

        <div class="dialog_center">
          <div class="type_bar">
            <el-tabs v-model="bundleType" @tab-click="changeBundleType">
              <el-tab-pane label="微信" name="wx"></el-tab-pane>
              <el-tab-pane label="支付宝" name="zfb"></el-tab-pane>
            </el-tabs>
          </div>

          <transition name="fade">
            <div v-if="bundleType === 'wx'" class="wx_box">
              <img
                class="ewm"
                src="@/assets/images/pc_black/center/background.png"
              />

              <div class="desc">
                <img src="@/assets/images/mobile_black/login/wx.png" />
                <span>请使用微信扫一扫</span>
              </div>
            </div>
          </transition>

          <transition name="fade">
            <div v-if="bundleType === 'zfb'" class="zfb_box">
              <div class="input_box">
                <span>支付宝账号</span>
                <input
                  type="text"
                  placeholder="请输入您的支付宝账号"
                  v-model="alipayAccount"
                />
                <img
                  v-show="alipayAccount.length > 0"
                  src="@/assets/images/mobile_black/login/clear.png"
                  @click="clearAlipayAccount"
                />
              </div>

              <div class="bottom_btn">
                <el-button @click="cancelBundleClick">取消</el-button>
                <el-button
                  :class="{ bGrey: alipayAccount.length < 1 }"
                  :disabled="alipayAccount.length < 1"
                  @click="confirmBundleClick"
                  >绑定</el-button
                >
              </div>
            </div>
          </transition>
        </div>
      </el-dialog>

      <!-- withdrawal dialog -->
      <el-dialog
        class="withdrawal_dialog"
        :visible="isShowWithdrawalDialog"
        :show-close="false"
        :close-on-click-modal="false"
        center
      >
        <div class="dialog_title">
          <div class="left_box">
            <span>提现</span>
          </div>

          <img
            class="right_icon"
            @click="closeWithdrawalDialog"
            src="@/assets/images/pc_black/auth/close.png"
          />
        </div>

        <div class="dialog_center">
          <div class="wd_type">
            <span class="wd_type_title">提现方式</span>
            <label>
              <input
                class="radio_type"
                type="radio"
                name="wd_type"
                value="wx"
                v-model="widthdrawal"
              />
              <span>微信</span>
            </label>
            <label>
              <input
                class="radio_type"
                type="radio"
                name="wd_type"
                value="zfb"
                v-model="widthdrawal"
              />
              <span>支付宝</span>
            </label>
          </div>

          <div class="wd_input">
            <div class="input_box">
              <span>提现金额</span>
              <span class="money_font">¥</span>
              <input
                type="number"
                placeholder="请输入提现金额"
                v-model="money"
              />
              <img
                class="clear"
                v-show="money.length > 0"
                src="@/assets/images/mobile_black/login/clear.png"
                @click="clearMoney"
              />
            </div>

            <div v-if="!isMoneyOverload" class="desc_green">
              当前账户余额<span class="money"> 1000.02 </span>元，<span
                class="cGreen"
                >全部提取</span
              >
            </div>
            <div v-else class="desc_red">输入金额超过可用金额</div>
          </div>

          <div class="bottom_btn">
            <div class="password_box">
              <span @click="gotoSetPassword">未设置密码</span>
              <i></i>
              <span @click="gotoResetPassword">忘记密码？</span>
            </div>
            <div class="btn_box">
              <el-button @click="cancelWithdrawalClick">取消</el-button>
              <el-button
                :class="{ bGrey: money.length < 1 }"
                :disabled="money.length < 1"
                @click="confirmWithdrawalClick"
                >提现</el-button
              >
            </div>
          </div>
        </div>
      </el-dialog>

      <!-- password dialog -->
      <el-dialog
        class="password_dialog"
        :visible="isShowPasswordDialog"
        :show-close="false"
        :close-on-click-modal="false"
        center
      >
        <div class="dialog_title">
          <img
            class="right_icon"
            @click="closePasswordDialog"
            src="@/assets/images/pc_black/auth/close.png"
          />
        </div>

        <div class="dialog_center">
          <div class="content_title">
            请输入支付密码
          </div>

          <div class="content_desc">
            提现
          </div>

          <div class="content_money">
            <span>¥</span>
            <span>1000.02</span>
          </div>

          <i class="content_line"></i>

          <div class="content_charge">
            <span>手续费</span>
            <span>¥ 0.01</span>
          </div>

          <div class="content_input">
            <SixInput
              type="password"
              :initFlag="initFlag"
              @complete="complete"
              @resetInitFlag="resetInitFlag"
              @getNowInput="getNowInput"
            />
          </div>

          <div class="content_btn">
            <button
              :class="{ bGrey: password.length !== 6 }"
              :disabled="password.length !== 6"
              @click="confirmPasswordClick"
            >
              确定
            </button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// vuex
import { mapActions, mapState } from "vuex";
// components
import { ElPage } from "@/components";
import SixInput from "@/components/SixInput";
// api
import { userAuthApi } from "@/api";
import { iscode } from "@/utils";

export default {
  name: "Account",
  components: { ElPage, SixInput },
  data() {
    return {
      // ------ data ------
      // 提现记录数据（从请求）
      tabelData: [
        {
          id: 1,
          time: "2022-04-01 18:01:04",
          type: "微信",
          amount: "100",
          state: "已提现",
        },
        {
          id: 2,
          time: "2022-05-01 18:01:04",
          type: "支付宝",
          amount: "7758258",
          state: "已提现",
        },
        {
          id: 3,
          time: "2022-06-01 18:01:04",
          type: "微信",
          amount: "520",
          state: "已提现",
        },
        {
          id: 4,
          time: "2022-10-01 18:01:04",
          type: "支付宝",
          amount: "1314",
          state: "已提现",
        },
      ],
      // 支付宝账号
      alipayAccount: "",
      // 提现方式（默认微信）
      widthdrawal: "wx",
      // 提现金额
      money: "",
      // 支付密码
      password: "",

      // ------ flag ------
      // 绑定弹窗
      isShowBundleDialog: false,
      // 提现弹窗
      isShowWithdrawalDialog: false,
      // 支付密码弹窗
      isShowPasswordDialog: false,
      // 提现的钱是否超载
      isMoneyOverload: false,
      // 是否重置sixinput
      initFlag: false,

      // ------ page ------
      // 总数量（从请求）
      total: 0,
      // 每页4条
      pagesize: 4,
      // 默认当前为第一页
      currentPage: 1,

      // ------ common ------
      // 切换绑定弹窗显示（wx/zfb）
      bundleType: "wx",
    };
  },
  computed: {
    // vuex
    ...mapState(["userInfo"]),
  },
  watch: {
    inputbox: {
      deep: true,
      handler(val) {
        let flag = true;
        val.forEach((item) => {
          if (item.value === "") {
            flag = false;
          }
        });
        if (flag) {
          this.inputbox.forEach((item) => {
            this.password += item.value;
          });
        } else {
          this.password = "";
        }
      },
    },
  },
  methods: {
    // ------ vuex ------
    // 获取用户信息（用于认证之后更新vuex里的userInfo数据）
    ...mapActions(["getUserInfo"]),

    // ------ async ------

    // ------ pag ------
    // 切换页码
    changePage(currentPage) {
      this.currentPage = currentPage;
    },

    // ------ bundle dialog ------
    // 切换绑定弹窗显示类型（wx/zfb）
    changeBundleType(tab, event) {
      this.bundleType = tab.paneName;
    },
    // 打开弹窗
    openBundleDialog() {
      this.isShowBundleDialog = true;
    },
    // 关闭弹窗
    closeBundleDialog() {
      this.isShowBundleDialog = false;
      this.alipayAccount = "";
    },
    // 取消绑定
    cancelBundleClick() {
      this.closeBundleDialog();
    },
    // 确认绑定
    confirmBundleClick() {
      this.closeBundleDialog();
    },
    // 清空支付宝账户输入框
    clearAlipayAccount() {
      this.alipayAccount = "";
    },

    // ------ withdrawal dialog ------
    // 打开弹窗
    openWithdrawalDialog() {
      this.isShowWithdrawalDialog = true;
    },
    // 关闭弹窗
    closeWithdrawalDialog() {
      this.isShowWithdrawalDialog = false;
      this.money = "";
    },
    // 取消提现
    cancelWithdrawalClick() {
      this.closeWithdrawalDialog();
    },
    // 确认提现
    confirmWithdrawalClick() {
      this.openPasswordDialog();
    },
    // 清空支付宝账户输入框
    clearMoney() {
      this.money = "";
    },

    // ------ password dialog ------
    // 打开弹窗
    openPasswordDialog() {
      this.isShowPasswordDialog = true;
    },
    // 关闭弹窗
    closePasswordDialog() {
      this.isShowPasswordDialog = false;
      this.password = "";
      // 每次关闭弹窗时初始化sixinput
      this.initFlag = true;
    },
    // 取消支付
    cancelPasswordClick() {
      this.closePasswordDialog();
    },
    // 确认支付
    confirmPasswordClick() {
      this.closePasswordDialog();
      this.closeWithdrawalDialog();
    },
    // 获取六格输入框最终输入结果
    complete(payload) {
      this.password = payload.join("");
    },
    // 重置sixinput的initFlag（initFlag：用来判断是否初始化sixinput）
    resetInitFlag() {
      this.initFlag = false;
    },
    // 获取当前密码
    getNowInput(payload) {
      payload.forEach((item) => {
        if (item === "") {
          this.password = "";
        }
      });
    },

    // ------ gotoPage ------
    // 退回上一步
    goBack() {
      this.$router.go(-1);
    },
    // 跳转到设置密码
    gotoSetPassword() {
      this.$router.push("/setPassword");
    },
    // 跳转到修改密码
    gotoResetPassword() {
      this.$router.push("/resetPassword");
    },
  },
};
</script>

<style lang="less" scoped>
#account {
  .center_wrapper {
    width: 1200px;
    margin: 0 auto;
  }

  // >> 返回按钮部分
  .back_part {
    width: 100%;
    padding-top: 20px;

    .back_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 104px;
      height: 30px;
      border: none;
      background: none;
      background-image: url("../../assets/images/personalCenter/btn.png");
      background-position: center center;
      background-size: 100% 100%;
      cursor: pointer;

      img {
        width: 20px;
        height: 6px;
      }

      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        margin-left: 10px;
      }
    }
  }

  // >> 账户部分
  .account_part {
    display: flex;
    align-items: center;
    width: 100%;
    height: 120px;
    background: #2b2c2d;
    margin-top: 22px;

    .account_left {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-width: 214px;
      padding: 35px 0 0 40px;
      margin: 0;

      p {
        margin: 0;
        padding: 0;
      }
      p:nth-child(1) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 14px;
      }
      p:nth-child(2) {
        margin-top: 10px;

        span {
          font-size: 26px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #00ffb0;
          line-height: 26px;
        }
        span:nth-child(1) {
          font-size: 16px;
          margin-right: 2px;
        }
      }
    }
    .account_center {
      width: 1px;
      height: 46px;
      border: 1px solid #444444;
    }
    .account_right {
      margin-left: 30px;

      /deep/.el-button {
        border: none;
      }
      /deep/.el-button:nth-child(1) {
        width: 74px;
        height: 40px;
        background: #2b2c2d;
        border-radius: 4px;
        border: 1px solid #666666;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 14px;
      }
      /deep/.el-button:nth-child(2) {
        width: 102px;
        height: 40px;
        background: #00ffb1;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1e2020;
        line-height: 14px;
        margin-left: 15px;
      }
    }
  }

  // >> 表格部分
  .table_part {
    width: 100%;
    margin-top: 10px;

    .table_head {
      width: 100%;
      height: 50px;
      background: #2b2c2d;

      ul,
      li {
        margin: 0;
        padding: 0;
        list-style: none;
        height: 100%;
      }
      ul {
        display: flex;
        align-items: center;
      }
      li {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #959596;
        line-height: 14px;
      }
      li:nth-child(1) {
        flex: 1;
      }
      li:nth-child(2) {
        flex: 1;
      }
      li:nth-child(3) {
        flex: 2;
        padding-right: 100px;
      }
      li:nth-child(4) {
        flex: 1;
      }
    }

    .table_body {
      display: flex;
      flex-direction: column;

      ul,
      li {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
      }
      ul {
        display: flex;
      }
      li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        background: #171818;
        box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.05);
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #959596;
        line-height: 14px;
        margin-bottom: 1px;
      }
      li:nth-child(1) {
        flex: 1;
      }
      li:nth-child(2) {
        flex: 1;
      }
      li:nth-child(3) {
        flex: 2;
        padding-right: 100px;
      }
      li:nth-child(4) {
        flex: 1;
      }
    }

    .table_pag {
      display: flex;
      justify-content: center;
      width: 100%;
      padding-top: 60px;
    }
  }

  // >> 绑定弹窗
  .bundle_dialog {
    /deep/.el-dialog {
      max-width: 560px;
      height: 480px;
      background: #1e2020;
      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
      border-radius: 5px;

      .el-dialog__header {
        display: none;
      }

      .el-dialog__body {
        margin: 0;
        padding: 0;

        .dialog_title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 20px 20px 0 30px;

          .left_box {
            display: flex;
            align-items: center;
            transform: translateY(10px);

            .icon_left {
              width: 20px;
              height: 20px;
            }

            span {
              font-size: 18px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 18px;
            }
          }

          .right_icon {
            width: 15px;
            height: 15px;
            cursor: pointer;
          }
        }

        .dialog_center {
          width: 100%;
          margin-top: 38px;
          padding: 0 30px;

          .type_bar {
            // tab栏边距调整
            .el-tabs__header {
              margin: 0;
              padding: 0;
            }
            // 字体样式修改
            .el-tabs__item {
              font-size: 14px;
              line-height: 28px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              padding: 0;
              padding-right: 40px;
            }
            .el-tabs__item:nth-child(2) {
              padding-left: 20px;
            }
            .el-tabs__item.is-active {
              color: #00ffb0;
            }

            .el-tabs__nav,
            .el-tabs__nav-wrap {
              margin: 0;
              padding: 0;
            }

            // 长下划线样式
            .el-tabs__nav-wrap::after {
              height: 1px;
              background: 1px solid #333333;
              opacity: 0.1;
            }
            // 当前选中下滑蓝边
            .el-tabs__active-bar {
              height: 2px;
              background: #00ffb0;
            }
          }

          .wx_box {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding-top: 41px;

            .ewm {
              width: 220px;
              height: 220px;
            }

            .desc {
              display: flex;
              align-items: center;
              margin-top: 20px;

              img {
                width: 28px;
                height: 28px;
              }
              span {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #00ffb0;
                line-height: 14px;
                margin-left: 17px;
              }
            }
          }

          .zfb_box {
            padding-top: 63px;

            .input_box {
              position: relative;
              display: flex;
              flex-direction: column;

              span {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 14px;
              }

              input {
                width: 100%;
                height: 36px;
                background: none;
                border: none;
                margin: 0;
                padding: 0;
                border-bottom: 1px solid #444444;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 14px;
                padding-bottom: 17px;
                padding-right: 50px;
                margin-top: 28px;
              }
              input::-webkit-input-placeholder {
                color: #666666 !important;
              }
              input:-moz-placeholder {
                color: #666666 !important;
              }
              input::-moz-placeholder {
                color: #666666 !important;
              }
              input:-ms-input-placeholder {
                color: #666666 !important;
              }

              img {
                position: absolute;
                right: 20px;
                bottom: 20px;
                width: 14px;
                height: 14px;
                cursor: pointer;
              }
            }
          }

          .bottom_btn {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 70px;
            background: #1e2020;
            box-shadow: 0px -1px 0px 0px #333333;
            border-radius: 0px 0px 5px 5px;

            .el-button {
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 0;
              padding: 0;
              background: none;
              border: none;
              border-radius: 4px;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              line-height: 14px;
            }

            .el-button:nth-child(1) {
              width: 74px;
              height: 40px;
              background: #1e2020;
              border: 1px solid #666666;
              color: #999999;
            }
            .el-button:nth-child(2) {
              width: 102px;
              height: 40px;
              background: #00ffb0;
              color: #1e2020;
              margin: 0 30px 0 15px;
            }
          }
        }
      }
    }

    // 双击不选中
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

  // >> 提现弹窗
  .withdrawal_dialog {
    /deep/.el-dialog {
      max-width: 560px;
      height: 480px;
      background: #1e2020;
      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
      border-radius: 5px;

      .el-dialog__header {
        display: none;
      }

      .el-dialog__body {
        margin: 0;
        padding: 0;

        .dialog_title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 20px 20px 0 30px;

          .left_box {
            display: flex;
            align-items: center;
            transform: translateY(10px);

            .icon_left {
              width: 20px;
              height: 20px;
            }

            span {
              font-size: 18px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 18px;
            }
          }

          .right_icon {
            width: 15px;
            height: 15px;
            cursor: pointer;
          }
        }

        .dialog_center {
          width: 100%;
          margin-top: 72px;
          padding: 0 30px;

          .wd_type {
            display: flex;
            align-content: center;

            .wd_type_title {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 14px;
            }

            label {
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 14px;
              margin: 0;
              padding: 0;
              transform: translateY(-4px);

              .radio_type {
                width: 18px;
                height: 18px;
                appearance: none;
                position: relative;
                outline: none;
              }
              .radio_type:before {
                content: "";
                width: 18px;
                height: 18px;
                border: 2px solid #444444;
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
              }
              .radio_type:checked:before {
                content: "";
                width: 18px;
                height: 18px;
                border: 2px solid #15956f;
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
              }
              .radio_type:checked:after {
                content: "";
                width: 8px;
                height: 8px;
                text-align: center;
                background: #00ffb0;
                border-radius: 50%;
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }

              span {
                margin-left: 8px;
              }
            }
            label:nth-child(2) {
              margin-left: 38px;
            }
            label:nth-child(3) {
              margin-left: 28px;
            }
          }

          .wd_input {
            margin-top: 42px;

            .input_box {
              position: relative;
              display: flex;
              flex-direction: column;

              .money_font {
                position: absolute;
                left: 0;
                bottom: 22px;
                font-size: 22px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #00ffb0;
                line-height: 22px;
              }

              span {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 14px;
              }

              input {
                width: 100%;
                background: none;
                border: none;
                margin: 0;
                padding: 0;
                border-bottom: 1px solid #444444;
                font-size: 28px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #00ffb0;
                line-height: 28px;
                padding: 0 50px 15px 26px;
                margin-top: 28px;
              }
              // 去除number类型input默认样式
              input[type="number"] {
                -moz-appearance: textfield;
              }
              input[type="number"]::-webkit-inner-spin-button,
              input[type="number"]::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
              }
              // 修改placeholder默认样式
              input::-webkit-input-placeholder {
                color: #666666 !important;
                font-size: 14px !important;
                font-family: PingFangSC-Regular, PingFang SC !important;
                transform: translateY(-5px) !important;
              }
              input:-moz-placeholder {
                color: #666666 !important;
                font-size: 14px !important;
                font-family: PingFangSC-Regular, PingFang SC !important;
                transform: translateY(-5px) !important;
              }
              input::-moz-placeholder {
                color: #666666 !important;
                font-size: 14px !important;
                font-family: PingFangSC-Regular, PingFang SC !important;
                transform: translateY(-5px) !important;
              }
              input:-ms-input-placeholder {
                color: #666666 !important;
                font-size: 14px !important;
                font-family: PingFangSC-Regular, PingFang SC !important;
                transform: translateY(-5px) !important;
              }

              .clear {
                position: absolute;
                right: 20px;
                bottom: 20px;
                width: 14px;
                height: 14px;
                cursor: pointer;
              }
            }
          }

          .desc_green,
          .desc_red {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 14px;
            margin-top: 19px;
          }
          .desc_green {
            color: #999999;
            .money {
              color: #ffffff;
            }
          }
          .desc_red {
            color: #ff8686;
          }

          .bottom_btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 70px;
            background: #1e2020;
            box-shadow: 0px -1px 0px 0px #333333;
            border-radius: 0px 0px 5px 5px;
            padding: 0 30px;

            .password_box {
              span {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 14px;
                cursor: pointer;
              }
              i {
                width: 1px;
                height: 14px;
                border: 1px solid #444444;
                margin: 0 15px;
              }
            }

            .btn_box {
              display: flex;

              .el-button {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
                padding: 0;
                background: none;
                border: none;
                border-radius: 4px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                line-height: 14px;
              }

              .el-button:nth-child(1) {
                width: 74px;
                height: 40px;
                background: #1e2020;
                border: 1px solid #666666;
                color: #999999;
              }
              .el-button:nth-child(2) {
                width: 102px;
                height: 40px;
                background: #00ffb0;
                color: #1e2020;
                margin-left: 15px;
              }
            }
          }
        }
      }
    }

    // 双击不选中
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

  // >> 密码弹窗
  .password_dialog {
    /deep/.el-dialog {
      max-width: 340px;
      height: 340px;
      background: #1e2020;
      border-radius: 5px;
      margin-top: 21vh !important;

      .el-dialog__header {
        display: none;
      }

      .el-dialog__body {
        margin: 0;
        padding: 0;

        .dialog_title {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 100%;
          padding: 15px 15px 0 0;

          .right_icon {
            width: 15px;
            height: 15px;
            cursor: pointer;
          }
        }

        .dialog_center {
          display: flex;
          flex-direction: column;
          width: 100%;
          padding: 0 20px;

          .content_title {
            text-align: center;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 16px;
          }

          .content_desc {
            text-align: center;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 16px;
            margin-top: 25px;
          }

          .content_money {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 15px;

            span {
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #00ffb0;
            }
            span:nth-child(1) {
              font-size: 22px;
              line-height: 22px;
            }
            span:nth-child(2) {
              font-size: 28px;
              line-height: 26px;
              margin-left: 4px;
            }
          }

          .content_line {
            height: 1px;
            border-bottom: 1px solid #333333;
            margin-top: 30px;
          }

          .content_charge {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;

            span {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 12px;
            }
          }

          .content_input {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 20px;

            .password_input {
              display: flex;
              width: 42px;
              height: 48px;
              background-color: rgba(255, 255, 255, 0.15);
              font-size: 24px;
              line-height: 24px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              text-align: center;
              outline: none;
              border: none;
              // border-bottom: solid 3px rgba(255, 255, 255, 0.15);
              caret-color: #a5a5a5;
              padding: 0;
            }
          }

          .content_btn {
            display: flex;
            justify-content: center;
            margin-top: 26px;

            button {
              border: none;
              background: none;
              width: 102px;
              height: 40px;
              background: #00ffb0;
              border-radius: 4px;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #1e2020;
              line-height: 14px;
              cursor: pointer;
            }
          }
        }
      }
    }

    /deep/.input-box {
      input {
        width: 42px;
        height: 48px;
        font-size: 24px;
      }
    }

    // 双击不选中
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

  // >> 弹窗遮罩层
  /deep/.el-dialog__wrapper {
    background: rgba(0, 0, 0, 0.5);
  }

  // >> color/backgroundColor
  .cGreen {
    color: #00ffb1 !important;
    cursor: pointer;
  }
  .bGrey {
    background: #333333 !important;
  }

  // >> transition/animation
  .fade-enter-active {
    transition: all 0.4s ease;
  }
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
}
</style>
